<template>
    <div>
        <nav-bar :head="head"></nav-bar>
        <div class="inner_content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <van-cell v-for="(item, index) in list" :key="index" >
                        <div class="mock_inner">
                            <img :src="item.product_image" alt="">
                            <div class="right_mock">
                                <p>{{ item.product_name }}（￥{{ item.price_rmb }}）</p>
                                <p><span style="text-decoration:line-through;color:#808080">${{ item.price }}</span> &nbsp&nbsp <span style="color: rgba(201,54,83,0.89);">${{ item.discount_price }}</span></p>
                            </div>
                        </div>
                        <div class="des">
                            来自 <i>{{ item.place }}</i> 用户 <b>{{ item.nick_name }}</b> 于 <i>{{ item.purchase_at }}</i> 下单成功！
                        </div>
                    </van-cell>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { List } from 'vant';

    Vue.use(List);
    export default {
        name: "about",
        data (){
            return {
                head: '平台交易',
                list: [],
                loading: false,
                finished: false,
                refreshing: false,
                page: 1
            }
        },
        methods: {
            onLoad() {
                this.loading = true;
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                this.getAi();
            },
            onRefresh() {
                this.page = 1;
                // 清空列表数据
                this.finished = false;
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            getAi(){
                var param = {'page': this.page};
                this.$api.main.GetSimulation(param).then(res => {
                    for (let i = 0; i < res.data.data.length; i++) {
                        this.list.push(res.data.data[i]);
                    }
                    this.loading = false;
                    if (res.data.data < 20) {
                        this.finished = true;
                    }
                })
                this.page += 1;
            }
        },
        created() {
            // this.getAi();
        }
    }
</script>

<style scoped>
    .inner_content{
        margin-top: 50px;
    }
    .mock_inner{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 5px;
        background: #f2f2f2;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .right_mock{
        margin-left: 40px;
    }
    .mock_inner img{
        width: 60px;
        height: auto;
    }
    .mock_inner p{
        margin: 0;
    }
    .des{
        font-size: 13px;
        color: #808080;
    }
</style>
